<template>
  <div class="note-tags">
    <el-tag
      v-for="(tag, index) in tagList"
      :key="index"
      :color="tag.color || defaultColor"
      class="note-tag"
      style="margin-right: 8px; margin-bottom: 8px; color: white;"
    >
      {{ tag.name }}
    </el-tag>
  </div>
</template>

<script>
export default {
  name: "NoteTags",
  props: {
    // 标签字符串，多个标签用逗号分隔
    tags: {
      type: String,
      default: ""
    },
    // 默认标签颜色
    defaultColor: {
      type: String,
      default: "#409EFF"
    }
  },
  computed: {
    tagList() {
      if (!this.tags) return [];
      
      // 将逗号分隔的标签字符串转换为标签数组
      return this.tags.split(',').map(tagName => ({
        name: tagName.trim(),
        color: this.defaultColor
      })).filter(tag => tag.name);
    }
  }
};
</script>

<style scoped>
.note-tags {
  display: flex;
  flex-wrap: wrap;
}

.note-tag {
  color: white !important;
}

.note-tag:hover {
  opacity: 0.8;
}
</style>